<template>
	<view class="page-index">
		<!-- 商品列表 -->
		<z-paging ref="paging" v-model="list" :default-page-size="pageSize"
			@onRefresh="onRefresh" @query="getGoodsList" auto-show-system-loading auto-show-back-to-top>
		<!-- <uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="搜索商品名称" @iconClick="onSearch">
		</uni-easyinput> -->
		
		<!-- 商品列表容器 -->
		<view class="list-box">
			<view class="list" v-for="item in list" :key="item.id" @click="navigateToDetail(item)">
					<!-- 商品图片 -->
					<view class="img-box">
						<image :src="getImageUrl(item.coverPic)" mode="aspectFill"></image>
					</view>
					
					<!-- 商品名称 -->
					<view class="name">
						{{item.name}}
					</view>
					<!-- 商品积分 -->
					<view class="price">
						{{item.price}}积分
					</view>
			</view>
			
			<!-- 空状态显示 -->
			<view v-if="list.length === 0" class="empty-state">
				<image src="/static/index/empty.png" mode="aspectFit"></image>
				<text>暂无商品</text>
			</view>
		</view>
		</z-paging>
	</view>
	
</template>

<script>
import { GoodsList } from '@/api/index.js'
import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['CDN_BASE_URL'])
		},
		data() {
			return {
				pageSize: 10,
				list: [],
				loading: false,
				error: false,
				searchValue: ''
			}
		},
		onLoad() {
			this.initializePage()
		},
		onShow() {
			// 页面显示时可以添加需要的逻辑
		},
		methods: {
			// 初始化页面
			initializePage() {
				console.log('页面初始化')
			},
			
			// 跳转到商品详情
			navigateToDetail(item) {
				uni.navigateTo({
					url: `/pages/list/detli/index?id=${item.id}`
				})
			},
			
			// 获取完整的图片URL
			getImageUrl(imagePath) {
				if (!imagePath) return ''
				// 判断是否已经是完整的URL
				if (imagePath.startsWith('http')) {
					return imagePath
				}
				return this.CDN_BASE_URL + imagePath
			},
			
			// 获取商品列表
			getGoodsList(currPage, pageSize) {
				this.loading = true
				this.error = false
				
				GoodsList({
					pageSize: pageSize,
					currPage: currPage,
					communityId: uni.getStorageSync('communityId'),
					type: 2,
				}).then(res => {
					console.log('商品列表数据:', res)
					this.$refs.paging.complete(res.page && res.page.list ? res.page.list : [])
				}).catch(error => {
					console.error('获取商品列表失败:', error)
					this.error = true
					this.$tools.toast('获取商品列表失败，请重试')
					this.$refs.paging.complete([])
				}).finally(() => {
					this.loading = false
				})
			},
			
			// 当页面滚动到底部事件被触发
			onReachBottom() {
				// 通知z-paging滚动到底部了，z-paging会进行相应的处理，例如加载更多数据
				this.$refs.paging.pageReachBottom()
			},
			
			// 下拉刷新被触发
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					this.$tools.toast('刷新成功～')
				}, 500)
			},
			
			// 搜索功能
			onSearch() {
				console.log('搜索商品:', this.searchValue)
				// 可以根据需要实现搜索逻辑
			}
		}
	}
</script>

<style scoped lang="scss">
	// 页面基础样式
	page {
		background: #f2f2f2;
		height: 100vh;
	}
	
	// 主容器样式
	.page-index {
		background-color: #f2f2f2;
		padding: 16rpx;
		
		// 搜索框样式
		::v-deep .uni-easyinput__content {
			padding: 15rpx;
		}

		::v-deep .is-input-border {
			border-radius: 40rpx;
		}
		
		// 商品列表容器
		.list-box {
			display: flex;
			flex-wrap: wrap;
			min-height: 100rpx;
			margin-top: 28rpx;
		}
		
		// 商品项样式
		.list {
			width: 346rpx;
			height: 456rpx;
			margin-left: 15rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			transition: transform 0.2s;
			
			&:active {
				transform: scale(0.98);
			}
			
			// 商品名称
			.name {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 90%;
				margin: 10rpx;
				padding: 0 10rpx;
			}
			
			// 商品积分
			.price {
				font-size: 33rpx;
				color: #F3AE37;
				margin: 10rpx;
				padding: 0 10rpx;
			}
		}
		
		// 列表项间距调整
		.list:nth-child(2n+1) {
			margin-right: 24rpx;
		}
		
		// 商品图片容器
		.img-box {
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 339rpx;
			height: 310rpx;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		// 空状态样式
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;
			width: 100%;
			
			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 30rpx;
			}
			
			text {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
</style>